<template>
<div :class="$style.container">
  <List :lists="lists"/>
  <Pay @pay="handlePayMethodChange"/>
  <Footor :total="total" @submit="submit"/>
  <div>
     <loading :show="showLoading" text="加载中..."></loading>
     <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>

<script>
import List from './components/list'
import http from '../../APIService/http'
import { Loading, Alert } from 'vux'
import Pay from './components/pay'
import Footor from './components/footor'
import * as math from 'mathjs'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      lists: [],
      methods: 'zfbPay',
      orderId: ''
    }
  },
  components: {
    List,
    Loading,
    Alert,
    Pay,
    Footor
  },
  mounted () {
    this.orderId = this.$route.query.id
    this.init()
  },
  computed: {
    total () {
      let sum = 0
      this.lists.forEach(item => {
        sum = math.add(sum, item.price)
      })
      return sum
    }
  },
  methods: {
    async init () {
      try {
        let params = {
          orderId: this.orderId
        }
        let res = await http.get(`/order/getOrder`, params)
        if (res.code === 0) {
          this.lists = res.data.films
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('get order fail:', err)
        this.showLoading = false
      }
    },
    // 支付方式
    handlePayMethodChange (val) {
      this.methods = val
    },
    // 提交订单
    async submit () {
      try {
        let params = {
          method: this.methods,
          id: this.orderId
        }
        this.showLoading = true
        let res = await http.post(`/order/pay`, params)
        if (res.code === 0) {
          this.showLoading = false
          this.$router.push({
            path: '/order'
          })
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('submit cashier fail:', err)
        this.showLoading = false
        this.tip = '网络出错'
        this.showAlert = true
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
}

</style>